[Synthetics] Fix mobile synthetics image clipping #106128
Merged
+14
−6
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
justinkambic
added
bug
|
Pinging @elastic/uptime (Team:uptime) |
justinkambic
force-pushed
the
339/fix-mobile-image-clipping
branch
from
805e443 to
d2eea2b
Compare
|
I tested this with full screenshot-style monitors as well (as opposed the blocking optimization we introduced for 1.14). Seemed to work fine. |
💚 Build SucceededMetrics [docs]Async chunks
History
To update your PR or re-run it, just comment with: |
justinkambic
added
the
auto-backport
|
Checked this with local build of the branch and it works as expected for the iphone viewport I tried originally: |
dominiqueclarke
approved these changes
Jul 20, 2021
@dominiqueclarke I am ++ for doing this. I'll create an enhancement request. EDIT: Issue here: elastic/uptime#344 |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 20, 2021
* Change hardcoded image size value to prevent clipping of mobile synthetics screenshots. * Compute max values for `ref`-style screenshots to improve display ux.
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 20, 2021
* Change hardcoded image size value to prevent clipping of mobile synthetics screenshots. * Compute max values for `ref`-style screenshots to improve display ux.
kibanamachine
added a commit
that referenced
this pull request
Jul 20, 2021
kibanamachine
added a commit
that referenced
this pull request
Jul 20, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Resolves elastic/uptime#339.
The default sizes we use for images are hardcoded. They work well for landscape-shaped images; portrait-shaped images like the ones produced by mobile emulation are getting clipped by the hardcoded value.
We can limit the width to a
max-sizeand allow height to match. The plus side of this solution is it's very simple, and it works for both image sizes. The drawback is it will reduce the size of the image we show for desktop-style images, but it will not clip anything. Users will also still have the ability to expand the screenshot to see it in the full-screen viewer mode.This is a minimum-viable fix. I am open to suggestions on how to make this better, especially if it means the existing experience won't change.
Checklist
Delete any items that are not applicable to this PR.
Risk Matrix
Delete this section if it is not applicable to this PR.
Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release.
When forming the risk matrix, consider some of the following examples and how they may potentially impact the change:
For maintainers